<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>

    <script>
      // 移动端:
      // touchstart 手指触摸到屏幕的时候触发 一般使用touches或targetTouches
      // touchmove  手指在屏幕上移动触发 一般使用touches或targetTouches
      // touchend 手指离开屏幕 一般会使用changedTouches. 可以拿到离开的那个触点的信息
      // touchcancel 手机在屏幕上触发过程中被中断了

      // 触摸事件的事件对象
      // touches  记录了屏幕上所有的触点信息
      // targetTouches 记录了屏幕上某个指定元素的触点信息
      // changedTouches 记录了屏幕上改变的触点信息
      const box = document.getElementsByClassName('box')[0]
      let start
      box.ontouchstart = function (e) {
        console.log('手指触摸屏幕了', e)
        start = Date.now()
      }
      box.onclick = function () {
        console.log('点击box了')
        const end = Date.now()
        console.log(end - start)
      }
      // box.ontouchmove = function (e) {
      //   console.log('手指在屏幕上移动了', e)
      // }
      // box.ontouchend = function (e) {
      //   console.log('手指离开屏幕了', e)
      // }
    </script>
  </body>
</html>
